<template>
  <div class="department">
    <page-search
      :searchConfig="searchConfig"
      @queryClick="handleQueryClick"
      @resetClick="handleResetClick"
    />
    <page-content
      ref="contentRef"
      @editClick="handleEditClick"
      @newClick="handleNewClick"
      :contentConfig="contentConfig"
    >
      <!-- <template #leader="scoped">{{ scoped.row.leader }}我是你爸</template>
      <template #leader1="scoped">{{ scoped.row.leader }}我是你爸1</template> -->
    </page-content>
    <page-modal ref="modalRef" :modalConfig="modalConfigRef" />
  </div>
</template>

<script setup lang="ts" name="department">
// import pageSearch from './c-cpns/pageSearch.vue'
import pageSearch from '@/components/pageSearch/pageSearch.vue'
import pageContent from '@/components/pageContent/pageContent.vue'
import pageModal from '@/components/pageModal/pageModal.vue'
import searchConfig from './config/search.config'
import contentConfig from './config/content.config'
import modalConfig from './config/modal.config'
import { computed } from 'vue'
import useMainStore from '@/store/main/main'
import { storeToRefs } from 'pinia'
import usePageContent from '@/hooks/usePageContent'
import usePageModal from '@/hooks/usePageModal'
// 处理modalConfig数据
const modalConfigRef = computed(() => {
  const mainStore = useMainStore()
  const { entireDepartments } = storeToRefs(mainStore)
  modalConfig.formItems.forEach((item) => {
    if (item.prop == 'parentId') {
      item.options = entireDepartments.value.map((item) => ({
        value: item.id,
        label: item.name
      }))
      item.initialValue = item.options[0].value // 初始值设为第一个option
    }
  })
  return modalConfig
})

// setup相同功能的抽取: hooks
// 点击Search,content的操作
const { contentRef, handleResetClick, handleQueryClick } = usePageContent()
// 点击content, modal的操作
const { modalRef, handleEditClick, handleNewClick } = usePageModal()
</script>

<style scoped>
.department {
  border-radius: 10px;
  overflow: hidden;
}
</style>
